<template>
  <view class="page">
    <view class="top" :style="{ backgroundImage: `url(${imgUrl})` }">
      <text>账号余额 （元）</text>
      <view class="flex-row">
        <text class="big">{{ amount }}</text>
        <text>冻结(元)：{{ amountFrozen }}</text>
      </view>
    </view>
    <view class="bottom">
      <text>提现金额</text>
      <u-input
          placeholder="请输入内容"
          border="bottom"
          v-model="withDrawPrice"
          prefixIcon="rmb"
          prefixIconStyle="font-size: 22px;color: #909399"
          :clearable="showClear"
      >
      </u-input>
      <view class="flex-row">
        <text>可提现金额 ￥{{ amount }}</text>
        <text class="text-red" @click="totalMoney">全部提现</text>
      </view>

      <u-button type="error" :plain="true" text="提现" @click="handleWithDraw"></u-button>
    </view>
    <u-popup :show="showPoup" @close="close" @open="open" mode="center" :round="10" :customStyle="poupStyle">
      <view class="poup-container flex-column">
        <text>请填写真实姓名</text>
        <u-input
            class="input"
            placeholder="请填写真实姓名"
            border="surround"
            :round="10"
            v-model="remark"
            :customStyle="{width: '80%',marginBottom: '10px',marginTop: '20px'}"
            :clearable="showClear"
        >
        </u-input>
        <text class="small">*填写真实姓名以方便提现</text>
        <view class="flex-row">
          <u-button type="error" :plain="true" text="取消" @click="close"></u-button>
          <u-button type="error" text="确定" @click="handleConfirmWithDraw"></u-button>
        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
import bgBase64 from "@/static/const/bgBase64";
import {isEmptyString} from "@/utils/common";
import {getStorage, setStorage} from "@/utils/auth";
import application from "@/static/const/application";

export default {
  name: "index",
  data() {
    return {
      imgUrl: bgBase64.inviteFriendBg,
      staticData: {},
      withDrawPrice: 0,
      showClear: true,
      showPoup: false,
      poupStyle: {
        width: "20rem",
        height: "auto",
        padding: "0 0 0 0",
        borderRadius: "10px",
        backgroundColor: "#FFFFFF",
      },
      remark: "",
    };
  },
  computed: {
    amount() {
      // 金额, 保留两位小数，不足补0
      if (isEmptyString(this.staticData.amount)) {
        return 0.00;
      }
      return this.staticData.amount.toFixed(2);
    },
    amountFrozen() {
      // 金额, 保留两位小数，不足补0
      if (isEmptyString(this.staticData.amountFrozen)) {
        return 0.00;
      }
      return this.staticData.amountFrozen.toFixed(2);
    },
  },
  onShow() {
    this.getStaticData();
  },
  methods: {
    getStaticData() {
      this.$store.dispatch("GetIncomeStatistics").then((response) => {
        console.log(response);
        this.staticData = response.data;
      });
    },
    // 全部提现
    totalMoney() {
      this.withDrawPrice = this.amount;
    },
    // 提现
    handleWithDraw() {
      if (this.withDrawPrice <= 0) {
        this.$u.toast("请输入提现金额");
        return;
      }
      if (this.withDrawPrice > this.amount) {
        this.$u.toast("提现金额不能大于可提现金额");
        return;
      }
      if (isEmptyString(getStorage(application.user).remark)) {
        this.showPoup = true;
        return;
      } else {
        this.$store.dispatch("AddWithdraw", {
          money: this.withDrawPrice,
          way: "1",
          remark: getStorage(application.user).remark
        }).then((response) => {
          console.log(response);
          this.$u.toast("提交成功，等待审核");
          this.getStaticData();
          this.withDrawPrice = 0;
        });
      }

    },
    handleConfirmWithDraw() {
      const userId = getStorage(application.user).userId;
      this.$store.dispatch("EditUserRealName", {
        userId: userId,
        realName: this.remark
      }).then((response) => {
        console.log(response);
        this.$u.toast("真实姓名修改成功");
        setStorage(application.user, response.data);
        this.showPoup = false;
      });
    },
    close() {
      this.showPoup = false;
    },
    open() {
      this.showPoup = true;
    },
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100vh;
  background-color: #FFFFFF;

  .top {
    background-size: 100% 100%;
    height: 7rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20rpx;
    padding-right: 20rpx;

    text {
      color: #FFFFFF;
      font-size: 0.8rem;
    }

    .flex-row {
      justify-content: space-between;
      margin-top: 0.5rem;

      .big {
        font-size: 1.5rem;
      }
    }
  }

  .bottom {
    margin-top: 1.5rem;
    padding-left: 20rpx;
    padding-right: 20rpx;

    text {
      font-size: 0.8rem;
    }

    .flex-row {
      justify-content: space-between;
      margin-top: 1rem;
      margin-bottom: 3rem;
    }

    .marginTop {
      padding-top: 1rem;
    }
  }

  .poup-container {
    //height: 10rem;
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 10px;

    text {
      font-size: 1rem;
    }

    .small {
      width: 80%;
      font-size: 0.5rem;
      color: #999999;
    }

    .flex-row {
      justify-content: space-between;
      margin-top: 2rem;
      width: 100%;

      .u-button {
        width: 40%;
      }
    }
  }
}
</style>